<template>
	<view class="page">
		<view class="header">
			<view class="logo">
				<image src="../../static/logo.png" style="height:78rpx;width:416rpx"></image>
			</view>
			<view style="margin-top: 60rpx;">账号登录</view>
		</view>
		<view class="body">
			<uni-easyinput prefixIcon="person-filled" type="text" v-model="formData.username" clearable placeholder="请输入账号" />
			<uni-easyinput prefixIcon="locked-filled" type="password" v-model="formData.password" placeholder="请输入密码" />
		<!-- 	<checkbox-group @change="onChange">
				<checkbox value="autoLogin" :checked="autoLogin" style="transform:scale(0.7)" />
				<span>自动登录</span>
			</checkbox-group> -->
		</view>
		<button style="margin-top: 60rpx; background-color: #ff8d02;color: #fff;" type="default" @click="submit" :loading="loading">立即登录</button>
		<view class="bottom">
			Copyright © 2022 乐易通付 浙ICP备2022025523号-1
		</view>
	</view>
</template>
 
<script>
	export default {
		name: 'login',
		data() {
			return {
				autoLogin: true,
				// 表单数据
				formData: {
					username:'',
					password: ''
				},
				loading: false
			};
		},
		
		
		methods: {
			onChange( { detail } ) {
				if(detail.value.length > 0) {
					this.autoLogin = true
				} else {
					this.autoLogin = false
				}
			},
			
			
			submit() {
				if(this.loading) {
					return
				}
				
				if(this.formData.username == "") {
					uni.showToast({
						icon:'error',
						title: '请输入登录账号'
					})
					return ;
				}
				
				if(this.formData.password == "") {
					uni.showToast({
						icon:'error',
						title: '请输入登录密码'
					})
					return ;
				}
				
				uni.showLoading({
					title: '登录中...'
				})
				
				this.loading = true
				
				uni.request({
					url: '/login/loginPwd',
					data: this.formData,
					method: "POST",
					success: (res) => {
						if(res.data.success) {
							
							uni.setStorageSync('uid', res.data.data.uid)
							
							uni.showToast({
								icon:'success',
								title:'登录成功'
							})
							uni.navigateTo({
								url:'/pages/index/index'
							})
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.errMessage
							})
						}
					},
					complete: () => {
						uni.hideLoading()
						this.loading = false
					}
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 50rpx 80rpx;
		// background-image: linear-gradient(to bottom, #fe214f 0%, #f9748f 19%, #fd868c 60%, #fe214f 100%);
		// background-image: linear-gradient(to bottom right, #fe214f, #fcab01);
		background-image: url('../../static/images/background.jpg');
	}
	
	.body {
		margin-top: 100rpx;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
 
	.header {
		margin-top: 180rpx;
		padding:0 auto;
		text-align: center;
		font-size: 46rpx;
		color: #fff;
		
	}
	
	.bottom {
		position: fixed;
		bottom: 20rpx;
		width: 100%;
		text-align: center;
		left: 0;
		font-size: 24rpx;
		color: #fff;
	}
</style>